<template>
  <div class="container mt-5">
    <div class="text-center mb-5">
      <button @click="get_douban_movies" class="btn btn-success btn-lg">
        <i class="fas fa-film me-2"></i>获取豆瓣电影
      </button>
    </div>

    <div v-if="titles_data.length > 0" class="mb-5">
      <h2 class="text-center mb-4">电影标题列表</h2>
      <div class="row row-cols-1 g-4">
        <div class="col" v-for="(title, index) in titles_data" :key="index">
          <div class="card glass-card h-100">
            <div class="card-body text-center">
              <h5 class="card-title">{{ title.TITLE }}</h5>
              <p class="card-text"><strong>评分：</strong>{{ title.SCORE }}</p>
              <p class="card-text"><strong>票房：</strong>{{ title.BOXOFFICE }}</p>
              <a :href="title.URL" target="_blank" class="btn btn-info">
                <i class="fas fa-external-link-alt me-2"></i>豆瓣链接
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="movies_data.length > 0" class="mb-5">
      <h2 class="text-center mb-4">豆瓣电影列表</h2>
      <div class="row row-cols-1 g-4">
        <div class="col" v-for="(item, index) in movies_data" :key="index">
          <div class="card glass-card h-100">
            <div class="card-body text-center">
              <h5 class="card-title">{{ item.TITLE }}</h5>
              <p class="card-text"><strong>评分：</strong>{{ item.SCORE }}</p>
              <p class="card-text"><strong>票房：</strong>{{ item.BOXOFFICE }}</p>
              <a :href="item.URL" target="_blank" class="btn btn-info">
                <i class="fas fa-external-link-alt me-2"></i>豆瓣链接
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const movies_data = ref([])
const titles_data = ref([])

const get_douban_movies = function () {
  const url = 'http://127.0.0.1:8000/api/douban_n?n=1000'
  axios
    .get(url)
    .then((res) => {
      if (Array.isArray(res.data.data)) {
        movies_data.value = res.data.data
      } else {
        console.error('返回的数据格式不正确，应为数组')
      }
    })
    .catch((error) => {
      console.error('获取豆瓣电影数据失败：', error.message)
    })
}

const query_movies_by_n = function () {
  if (!query_n.value) {
    alert('请输入 n 的值')
    return
  }

  const url = `http://127.0.0.1:8000/api/title?n=${query_n.value}`
  axios
    .get(url)
    .then((res) => {
      if (Array.isArray(res.data.data)) {
        titles_data.value = res.data.data
      } else {
        console.error('返回的数据格式不正确，应为数组')
      }
    })
    .catch((error) => {
      console.error('查询电影标题失败：', error.message)
    })
}
</script>

<style>
body {
  background-color: #f5f5f5;
  font-family: 'Inter', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.btn-success,
.btn-info {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-success:hover,
.btn-info:hover {
  transform: scale(1.05);
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.card-text {
  font-size: 1rem;
  color: #555;
}

@media (max-width: 768px) {
  .glass-card {
    margin: 0 10px;
  }
}
</style>